
    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>正则表达式匹配 - 学习卡片</title>
      <style>
        body { font-family: sans-serif; background-color: #f0f8ff; color: #333; display: flex; flex-direction: column; align-items: center; padding: 50px 20px; }
        .header h1 { font-size: 32px; }
        .grid-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; width: 100%; max-width: 1200px; }
        .card-container { perspective: 1200px; cursor: pointer; height: 250px; }
        .card { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.7s; border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); }
        .card-container.flipped .card { transform: rotateY(180deg); }
        .card-face { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; box-sizing: border-box; border-radius: 16px; background-color: #fff; padding: 24px; }
        .card-back { background-color: #f0fff4; transform: rotateY(180deg); justify-content: space-between; }
        .card-category { font-size: 14px; color: #0052d9; margin-bottom: 8px; font-weight: 500; }
        .card-question { font-size: 20px; font-weight: 500; flex-grow: 1; display: flex; align-items: center; justify-content: center; text-align: center; }
        .card-answer-wrapper { flex-grow: 1; overflow-y: auto; }
        .card-answer { font-size: 15px; line-height: 1.7; }
        .card-footer { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 16px; margin-top: 16px; }
        .card-source { font-size: 13px; color: #8a919f; border-top: 1px solid #f0f0f0; padding-top: 12px; margin-top: 12px; }
      </style>
    </head>
    <body>
      <div class="header">
        <h1>正则表达式匹配 - 学习卡片</h1>
      </div>
      <div class="grid-container">
        
    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">在文档描述的正则表达式匹配问题中，特殊字符'.'和'*'分别代表什么功能？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">'.' 匹配任意单个字符，而 '*' 匹配零个或多个它前面的那个元素。匹配需要覆盖整个输入字符串。</div>
          </div>
          <div class="card-source">来源: 题目描述</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">技术</div>
          <div class="card-question">文档中提到了哪两种核心算法来解决正则表达式匹配问题？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">技术</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">文档中提到的两种核心算法是：动态规划（Dynamic Programming）和回溯法（Backtracking）。</div>
          </div>
          <div class="card-source">来源: 核心考点/算法</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在使用动态规划法解决此问题时，dp[i][j] 的定义是什么？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">在动态规划法中，dp[i][j] 的定义是表示字符串 s 的前 i 个字符（s[0:i]）与模式 p 的前 j 个字符（p[0:j]）是否能够匹配。</div>
          </div>
          <div class="card-source">来源: 解题思路</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">理论</div>
          <div class="card-question">动态规划法和回溯法在解决此问题时的时间和空间复杂度分别是多少？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">理论</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">动态规划法的时间复杂度为 O(m*n)，空间复杂度为 O(m*n)。回溯法的时间复杂度为 O(2^(m+n))，空间复杂度为 O(m+n)，其中m是字符串s的长度，n是模式p的长度。</div>
          </div>
          <div class="card-source">来源: 解题思路</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">机制</div>
          <div class="card-question">在动态规划解法中，当模式字符 p[j-1] 为 '*' 时，状态转移的逻辑是怎样的？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">机制</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">当 p[j-1] 为 '*' 时，状态 dp[i][j] 的值取决于两种情况：1. '*' 匹配零个前面的元素，此时等价于 dp[i][j-2]；2. '*' 匹配一个或多个前面的元素，此时要求 s[i-1] 与 p[j-2] 匹配（或p[j-2]为'.'），并且 s 的前 i-1 个字符已与 p 的前 j 个字符匹配，即 dp[i-1][j]。最终 dp[i][j] 为这两种情况的“或”运算结果。</div>
          </div>
          <div class="card-source">来源: 示例代码</div>
        </div>
      </div>
    </div>

    <div class="card-container" onclick="this.classList.toggle('flipped');">
      <div class="card">
        <div class="card-face card-front">
          <div class="card-category">特性</div>
          <div class="card-question">在动态规划的初始化阶段，dp[0][0]为何被设置为True？以及如何处理模式 p 以 '*' 开头的情况？</div>
          <div class="card-footer">点击卡片查看答案</div>
        </div>
        <div class="card-face card-back">
          <div class="card-category">特性</div>
          <div class="card-answer-wrapper">
            <div class="card-answer">dp[0][0] 被设置为 True 是因为空字符串 s 和空模式 p 是匹配的。对于模式 p 开头的部分，如果 p[j-1] 是 '*'，dp[0][j] 的值可以从 dp[0][j-2] 继承，这代表 '*' 和它前面的字符匹配了零次，从而使得像 'a*b*' 这样的模式能匹配空字符串。</div>
          </div>
          <div class="card-source">来源: 示例代码</div>
        </div>
      </div>
    </div>

      </div>
    </body>
    </html>
